<template>
  <el-card shadow="never">
    <template #header>
      <!-- 标题 -->
      <div class="flex flex-row items-center justify-between">
        <CardTitle title="视频概况" />
        <!-- 查询条件 -->
        <ShortcutDateRangePicker ref="shortcutDateRangePicker" @change="getVLogTrendData">
          <el-button
            class="ml-4"
            @click="handleExport"
            :loading="exportLoading"
            v-hasPermi="['statistics:vlog:export']"
          >
            <Icon icon="ep:download" class="mr-1" />导出
          </el-button>
        </ShortcutDateRangePicker>
      </div>
    </template>
    <!-- 统计值 -->
    <el-row :gutter="16">
      <el-col :xl="4" :md="8" :sm="24">
        <SummaryCard
          title="博主数"
          icon="ep:user-filled"
          icon-color="bg-blue-100"
          icon-bg-color="text-blue-500"
          prefix=""
          :value="trendSummary?.value?.userCount || 0"
          :percent="
            calculateRelativeRate(
              trendSummary?.value?.userCount,
              trendSummary?.reference?.userCount
            )
          "
        />
      </el-col>
      <el-col :xl="4" :md="8" :sm="24">
        <SummaryCard
          title="视频数"
          icon="ep:video-camera-filled"
          icon-color="bg-blue-100"
          icon-bg-color="text-blue-500"
          prefix=""
          :value="trendSummary?.value?.vlogCount || 0"
          :percent="
            calculateRelativeRate(
              trendSummary?.value?.vlogCount,
              trendSummary?.reference?.vlogCount
            )
          "
        />
      </el-col>
      <el-col :xl="4" :md="8" :sm="24">
        <SummaryCard
          title="粉丝数"
          icon="ep:avatar"
          icon-color="bg-blue-100"
          icon-bg-color="text-blue-500"
          prefix=""
          :value="Number(trendSummary?.value?.fansCount) || 0"
          :percent="
            calculateRelativeRate(
              trendSummary?.value?.fansCount,
              trendSummary?.reference?.fansCount
            )
          "
        />
      </el-col>
    </el-row>
    <!-- 折线图 -->
    <el-skeleton :loading="trendLoading" animated>
      <Echart :height="500" :options="lineChartOptions" />
    </el-skeleton>
  </el-card>
</template>
<script lang="ts" setup>
import { VLogStatisticsApi, VLogStatisticsVO } from '@/api/vlog/statistics'
import SummaryCard from '@/components/SummaryCard/index.vue'
import { EChartsOption } from 'echarts'
import { calculateRelativeRate } from '@/utils'
import download from '@/utils/download'
import { CardTitle } from '@/components/Card'
import * as DateUtil from '@/utils/formatTime'
import dayjs from 'dayjs'

/** 视频概况 */
defineOptions({ name: 'VLogSummary' })

const message = useMessage() // 消息弹窗

const trendLoading = ref(true) // 视频状态加载中
const exportLoading = ref(false) // 导出的加载中
const trendSummary = ref<any>() // 视频状况统计数据
const shortcutDateRangePicker = ref<any>()

/** 折线图配置 */
const lineChartOptions = reactive<EChartsOption>({
  dataset: {
    dimensions: ['time', 'sendLikeCount', 'sendFavoriteCount', 'sendShareCount'],
    source: []
  },
  grid: {
    left: 20,
    right: 20,
    bottom: 20,
    top: 80,
    containLabel: true
  },
  legend: {
    top: 50
  },
  series: [
    { name: '点赞数', type: 'bar', itemStyle: { color: '#FFAB2B' } },
    { name: '收藏数', type: 'bar', itemStyle: { color: '#00C050' } },
    { name: '分享数', type: 'bar', itemStyle: { color: '#B37FEB' } }
  ],
  toolbox: {
    feature: {
      // 数据区域缩放
      dataZoom: {
        yAxisIndex: false // Y轴不缩放
      },
      brush: {
        type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
      },
      saveAsImage: { show: true, name: '视频状况' } // 保存为图片
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    },
    padding: [5, 10]
  },
  xAxis: {
    type: 'category',
    boundaryGap: true,
    axisTick: {
      show: false
    }
  },
  yAxis: [
    {
      type: 'value',
      name: '数量',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#7F8B9C'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#F5F7F9'
        }
      }
    }
  ]
}) as EChartsOption

/** 处理视频状况查询 */
const getVLogTrendData = async () => {
  trendLoading.value = true
  // 1. 处理时间: 开始与截止在同一天的, 折线图出不来, 需要延长一天
  const times = shortcutDateRangePicker.value.times
  if (DateUtil.isSameDay(times[0], times[1])) {
    // @ts-expect-error 前天
    times[0] = DateUtil.formatDate(dayjs(times[0]).subtract(1, 'd'))
  }
  // 查询数据
  await Promise.all([getVLogTrendSummary(), getVLogStatisticsList()])
  trendLoading.value = false
}

/** 查询视频状况数据统计 */
const getVLogTrendSummary = async () => {
  const times = shortcutDateRangePicker.value.times
  trendSummary.value = await VLogStatisticsApi.getVLogStatisticsAnalyse({ times })
}

/** 查询视频状况数据列表 */
const getVLogStatisticsList = async () => {
  // 查询数据
  const times = shortcutDateRangePicker.value.times
  const list: VLogStatisticsVO[] = await VLogStatisticsApi.getVLogStatisticsList({ times })
  // 更新 Echarts 数据
  // @ts-expect-error
  if (lineChartOptions.dataset && lineChartOptions.dataset['source']) {
    // @ts-expect-error
    lineChartOptions.dataset['source'] = list
  }
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const times = shortcutDateRangePicker.value.times
    const data = await VLogStatisticsApi.exportVLogStatisticsExcel({ times })
    download.excel(data, '视频状况.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}
</script>
<style lang="scss" scoped></style>
